<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <script type="module">
       import {
        reactive, 
        shallowReactive,
        readonly,
        shallowReadonly,
        effect,
        ref,
        toRef,
        toRefs,
        } from './index.js'

       const state = reactive({
          name: '展示',
          age: 40,
          list: [1,2,3]
       })
    //    state.name = '展2'
    //    state.list = []
    //    console.log(state)

   //  effect(() => {
   //    app.innerHTML = state.name + ' ' + state.age + '' + state.list
   //  })
   //  setTimeout(() => {
   //    state.name = '展昭'
   //    state.a = 'vv'
   //    state.list.push(4)
   //    state.list[2]= 300
   //    console.log(state)
   //  }, 2000)

   // 修改数组的长度，影响比较大
  //  effect(() => {
  //     app.innerHTML = state.list[2]
  //   })
  //   setTimeout(() => {
  //     state.list.length = 1
  //     console.log(state)
  //   }, 2000)
    

    // const flag = ref('ref')
    // const flagObj = ref({
    //   ...state
    // })
    // console.log(flagObj)
    // effect(() => {
    //   app.innerHTML = flag.value
    // })
    // setTimeout(() => {
    //   flag.value = 123
    // }, 2000)

    // reactive包装的对象，不能解构出来，不然会失去响应式
    // let { name } = state
    // 可以通过toRef/toRefs来解决
    // 但也不能先.value保持，然后去更改，也会失去响应式，和解构类似
    // .value =》 proxy.name 
    // const name = toRef(state, 'name')
    // effect(() => {
    //   app.innerHTML = name.value
    // })
    // setTimeout(() => {
    //   name.value = 123
    // }, 2000)

    let { name, age, list } = toRefs(state)
    console.log(name.value, age, list)

    /*
        reactive 1/判断是否是对象 2、重复代理问题解决 3、对不同数据类型进行proxy
        4/做缓存
        get baseHandler 取值的时候，会对数组类型单独处理，对ref进行处理
        set baseHandler 设置值的时候，会对ref单独处理，对新增和修改做不同的处理
        track 就是维护属性和effect之间的关系 name = effect age = effect
        {target: name: [effect, effect], age:[effect,effect]}
        trigger 就是找到target对应的属性的effect列表，然后全部执行

        响应式原理：属性会收集effect，属性更新会让收集的effect重新执行

    */
    </script>

</body>
</html>